<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>JFinal--Controller 传参之文件上传</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="JFinal,JFinal视频教程,JFinal极速开发实战教程,小木学堂">
<meta http-equiv="description" content="小木学堂-最专业的JFinal极速开发实战教程">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
<!-- 本案例自定义css样式表 -->
<link rel="stylesheet" href="assets/css/xmxt.css">
<script type="text/javascript" src="assets/js/jquery1.8.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.form.js"></script>
<script language="javascript" type="text/javascript" src="<%=basePath %>assets/js/datepicker/WdatePicker.js"></script>
<script type="text/javascript">
function submitForm(){
	var age=$("#age").val();
	if(isNaN(age)){
		alert("年龄请输入数字");
	}else{
		$("#form1").submit();
	}
}
</script>
<style type="text/css">
fieldset{
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
      <div class="logotxt shadowfont"><h1>JFinal极速开发实战教程</h1></div> 
      <h2 class="text-center shadowfont">小木学堂</h2>
    </div>
  </div>
</div>
</div>
<div class="container" style="background: #FFF;">
<div class="page-header">
		<h1>JFinal Controller 传参之文件上传</h1>
		</div>
	<div class="row" >
	<div class="col-lg-6 col-md-6 col-sm-6">
		<fieldset>
			<legend>Form表单 Post提交</legend>
			<form class="form-horizontal" role="form"  action="/param/formupload" method="post" target="_blank"
				enctype="multipart/form-data">
				  	<div class="form-group">
			    <label  class="col-sm-2 control-label">头像</label>
			    <div class="col-sm-10">
					<input  class="form-control" type="file" name="img" />
			    </div>
			  </div>
					<div class="form-group">
			    <label  class="col-sm-2 control-label">姓名</label>
			    <div class="col-sm-10">
			      <input type="text"  value="小木学堂" class="form-control" maxlength="40" name="name"   placeholder="填写姓名">
			    </div>
			  </div>
			<div class="form-group">
			    <label  class="col-sm-2 control-label">年龄</label>
			    <div class="col-sm-10">
			      <input type="text" class="form-control" maxlength="2" value="25" name="age" id="age" placeholder="填写年龄">
			    </div>
			  </div>
			<div class="form-group">
					    <label  class="col-sm-2 control-label">出生日期</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control"  maxlength="40" name="birthday" value="<fmt:formatDate value='<%=new Date() %>' pattern='yyyy-MM-dd'/>"   onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})" id="birthday" placeholder="选择出生日期">
					    </div>
			</div>
			<div class="form-group">
					    <label  class="col-sm-2 control-label">部门</label>
					    <div class="col-sm-10">
					      <select  name="department" class="form-control" >
							<option>=选择部门=</option>
							<option value="1" selected="selected">研发部</option>
							<option value="2">销售部</option>
							<option value="3">市场部</option>
							</select>
					    </div>
			</div>
			<div class="form-group">
					    <label  class="col-sm-2 control-label">职位</label>
					    <div class="col-sm-10">
					     <select  name="posation" class="form-control">
					<option>=选择职位=</option>
					<option value="1" selected="selected">部门经理</option>
					<option value="2">经理助理</option>
					<option value="3">普通职员</option>
					</select>
					    </div>
			</div>
			<div class="form-group">
					    <label  class="col-sm-2 control-label">备注</label>
					    <div class="col-sm-10">
					     <textarea name="desc"  class="form-control" style="height:60px;">小木学堂-最专业的JFinal教程</textarea>
					    </div>
			</div>
			<button class="btn btn-success pull-right" onclick="submitForm()">提交Form</button>
			</form>
		</fieldset>
		<fieldset>
			<legend>AJAX 上传文件</legend>
			<button id="ajaxuploadBtn" class="btn btn-primary" onclick="$('#imginput').click();">AJAX
				Upload图片</button>
					<div style="display: ;">
				<form method="post" id="avatarForm" enctype="multipart/form-data">
					<input type="file" name="img" id="imginput">
				</form>
					</div>
			<fieldset>
				<legend>AJAX 上传结果</legend>
				<div id="ajaxresult"
					style="width: 200px;height:200px;border: 1px solid #CCC;margin-top: 5px;">

				</div>
			</fieldset>
			<script type="text/javascript">
				$(function() {
					$("#imginput").on("change", function() {
						$("#avatarForm").ajaxSubmit({
							url : "/param/ajaxupload",
							type : "post",
							dataType : "json",
							success : function(data) {
								$("#ajaxresult").html("");
								var img = new Image();
								img.src = data.imgurl;
								img.width = 200;
								img.height = 200;
								$("#ajaxresult").append(img);
							}
						});

					});

				});
			</script>
		</fieldset>
	</div>
	 <jsp:include page="../qrcode.jsp"></jsp:include>
	</div>
	</div>
	<jsp:include page="../footer.jsp"></jsp:include>
